<template>
    <view class="recycle_price-container">
        <!-- Header -->
        <view class="recycle-header">
            <view class="recycle-header-content">
                <view class="recycle-price-title">信用回收独家估价</view>
                <view class="recycle-price"><text style="font-size: 44rpx;">¥</text>{{ price || '0.00' }}</view>
                <view class="recycle-price--reprice">
                    <navigator hover-class="none" open-type="navigateBack" :delta="1">
                        重新预估
                    </navigator>
                </view>
            </view>
        </view>
        
        <!-- Main -->
        <view class="recycle_price-main">
			<template v-if="mode === 'recycle'">
				<view class="recycle-process-title">回收流程</view>
				<view class="recycle-process"></view>				
			</template>
			<template v-if="mode === 'lendlease'">
				<view class="lendlease-process-title"></view>
				
				<block v-for="item in lendleaseProcess" :key="item.index">
					<view class="lendlease-process-item">
						<!-- Step Num -->
						<view class="lendlease-process-item-l">
							<view class="lendlease-process-item-count">{{ item.index }}</view>
							<view class="lendlease-process-item-tranf">
								<u-image width="24" height="115" src="/bundle/static/images/huanzu_icon_step2.png" />
							</view>
						</view>
						
						<!-- Step Content -->
						<view class="lendlease-process-item-r">
							<!-- Title -->
							<view class="lendlease-process-item-title">{{ item.title }}</view>
							<!-- Tips -->
							<view class="lendlease-process-item-desc">{{ item.desc }}</view>
							<!-- Image -->
							<u-image width="468" height="220" :src="item.image" />
						</view>
					</view>
				</block>
			</template>
        </view>
		
        
        <!-- Widget -->
        <view class="recycle_price-widget">
            <view class="recycle_price-btn--goorder" @tap="goPlaceOrder">
                去下单 
            </view>
        </view>
    </view>
</template>

<script>
    import { getAssess } from '@/api/recycle.js';
    
    export default {
        data() {
            return {
				mode: '',		// 回收 || 租赁
                payload: null,  // 承载表单信息
                plat: null,     // 收货地址信息
                price: '',      // 评估价
				
				lendleaseProcess: [
					{
						index: '01',
						title: '提交订单',
						desc: '填写商品信息，上传图片凭证，提交订单',
						image: '/bundle/static/images/huanzu_step_img01.png' 
					},
					{
						index: '02',
						title: '寄出商品',
						desc: '根据提供的地址，自行寄出商品',
						image: '/bundle/static/images/huanzu_step_img02.png' 
					},
					{
						index: '03',
						title: '等待质检',
						desc: '商家收到商品，对商品进行质检',
						image: '/bundle/static/images/huanzu_step_img03.png' 
					},
					{
						index: '04',
						title: '质检通过，等待打款',
						desc: '商家质检通过后，将打款至您的账户中',
						image: '/bundle/static/images/huanzu_step_img04.png' 
					},
					{
						index: '05',
						title: '选择租期，重新租用',
						desc: '选择要租用的期数，按月/周还款',
						image: '/bundle/static/images/huanzu_step_img05.png' 
					}
				]
            }
        },
        
        methods: {
            // 去下单
            goPlaceOrder() {
                uni.redirectTo({
                    url: '/bundle/pages/recycle_order/recycle_order'
                      + '?order=' + JSON.stringify(this.payload)
                      + '&plat=' + JSON.stringify(this.plat)
                      + '&price=' + this.price
					  + '&mode=' + this.mode
                })
            }
        },
        
        onLoad(options) {
			this.mode = options.mode || 'recycle';
            const order = JSON.parse(options.order);
            this.payload = order;
            
            getAssess({
                re_id: order.re_id, 
                item_ids: order.item_ids
            }).then(res => {
                const data = res.data;
                this.price = data.total_amount || '0.00';
                this.plat = data.plat || {};
            });
        }
    }
</script>

<style scoped>
    .recycle-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 300rpx;
        padding: 30rpx;
        background: url(../../static/images/huishou_price_banner.png) no-repeat;
        background-size: 100% 100%;
    }
    
    .recycle-header-content {
        position: relative;
        width: 100%;
        text-align: center;
        color: #FFFFFF;
    }
    
    .recycle-price-title {
        font-size: 34rpx;
    }
    
    .recycle-price {
        font-size: 80rpx;
    }
    
    .recycle-price--reprice {
        position: absolute;
        right: 0;
        bottom: 1em;
        font-size: 26rpx;
    }
    
    .recycle_price-main {
       padding: 40rpx;
       margin: 20rpx 20rpx 0 20rpx;
       border-radius: 10px;
       background-color: #FFFFFF;
    }
    
    .recycle-process-title {
        padding-bottom: 20rpx;
        font-size: 32rpx;
        color: #333333;
    }
    
    .recycle-process {
        position: relative;
        width: 100%;
        height: 76rpx;
        display: flex;
        justify-content: space-between;
        background: url(../../static/images/huishou_step.png) no-repeat;
        background-size: 100% 100%;
    }
	
	.lendlease-process-title {
		height: 50rpx;
		background: url(../../static/images/huanzu_title.png) no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	
	.lendlease-process-item {
		display: flex;
		margin-top: 20rpx;
	}
	
	.lendlease-process-item-l {
		width: 65rpx;
		margin-right: 20rpx;
	}
	
	.lendlease-process-item-count {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 58rpx;
		font-size: 32rpx;
		font-weight: 500;
		background: url(../../static/images/huanzu_icon_step1.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
	}
	
	.lendlease-process-item-tranf {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
	
	.lendlease-process-item-title {
		height: 58rpx;
		line-height: 58rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	
	.lendlease-process-item-desc {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
    
    .recycle_price-widget {
        margin: 40rpx 30rpx 30rpx 30rpx;
    }
    
    .recycle_price-btn--goorder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;
        border-radius: 50px;
        font-size: 34rpx;
        color: #FFFFFF;
        background-image: linear-gradient(to left, #3187FD, #FF4D40);
    }
</style>
